<template>
  <div class="loading">
    <span></span>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
  </div>
</template>

<script>
export default {};
</script>

<style lang="less">
.loading {
  width: 200px;
  height: 200px;
  border: black 1px solid;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(3, 1fr);
  grid-gap: 10px;
  transform: rotate(45deg);
  span {
    text-align: center;
    transform: rotate(0);
    animation: blinking 2s linear infinite;
    animation-delay: var(--d);
  }
  span:nth-child(7) {
    background-color: #f15a5a;
    --d: 0s;
  }
  span:nth-child(4),
  span:nth-child(8) {
    background-color: #f0c419;
    --d: 0.2s;
  }
  span:nth-child(1),
  span:nth-child(5),
  span:nth-child(9) {
    background-color: #4eba6f;
    --d: 0.4s;
  }
  span:nth-child(2),
  span:nth-child(6) {
    background-color: #2d95bf;
    --d: 0.6s;
  }
  span:nth-child(3) {
    background-color: #955ba5;
    --d: 0.8s;
  }
}

// 动画
@keyframes blinking {
  0%,
  100% {
    transform: scale(0);
  }
  40%,
  80% {
    transform: scale(1);
  }
}
</style>
